<template>
  <div style="width: 200px;height: 100%">
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
      <div style="height: 56px; width: 199px;">
        <span style="line-height: 56px;display: flex;justify-content: center;align-items: center">毕业论文管理系统</span>
      </div>
      <template v-for="item in menuList">
        <el-submenu v-if="item.children" :index="item.path" :key="item.path">
          <template slot="title">
            <i :class="item.icon"></i>
            {{ item.name }}
          </template>
          <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path">
            {{ child.name }}
          </el-menu-item>
        </el-submenu>
        <el-menu-item v-else :index="item.path" :key="item.path">
          <i :class="item.icon"></i>
          {{ item.name }}
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import {getMenuListApi} from "@/api/MenuApi";

export default {
  data() {
    return {
      menuList: [],
      role: localStorage.getItem("roles")
    }
  },
  methods: {
    getMenuList() {
      getMenuListApi(this.role).then(res => {
        this.menuList = res.data
      })

    }
  },
  created() {
    this.getMenuList()
  }
}
</script>

<style scoped lang="scss">
.el-menu {
  height: 100%;
  overflow-x: hidden;
}
</style>
